<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="活动标题">
              <a-input placeholder="请输入活动标题" v-decorator="['actName',  validatorRules.actName]" />
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="活动内容">
              <a-textarea placeholder="请输入活动内容" v-decorator="['actContent',validatorRules.actContent]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="活动时间">
              <a-range-picker format="YYYY-MM-DD" v-decorator="['actStart', validatorRules.actStart]"/>
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="执行要求">
              <a-textarea placeholder="请输入执行要求" v-decorator="['actExecNeeds', validatorRules.actExecNeeds]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="采集项目">
              <j-multi-select-tag v-decorator="['actCollections', validatorRules.actCollections]" placeholder="请选择采集项目"
                                  :type="'checkbox'" :triggerChange="true" dictCode="act_collect_neet"/>
            </a-form-item>

          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="门店清单">
              <cn-dict-select-tag
                :options="{value:'dictDataCode',label:'dictDataDesc'}"
                :triggerChange="true"
                @change="changeTerm"
                dictCode="ishave"
                v-decorator="['haveTerm', validatorRules.haveTerm]"
                placeholder="门店清单"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item v-if="showorg"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="活动组织">
                <j-tree-select
                  placeholder="请选择所属组织"
                  :multiple = "'true'"
                  v-decorator="['actOrgs', {}]"
                  data-type="org"
                />
            </a-form-item>
            <a-form-item label="示例文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-image-upload class="avatar-uploader" text="上传" v-decorator="[ 'actFileUrl', validatorRules.actFileUrl]"></j-image-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <!-- 活动明细 -->
    <a-tabs v-model="tabs.activeKey" v-if="showterm">
      <a-tab-pane tab="门店清单" :key="tabs.global.key" forceRender>
        <tpm-act-special-detail-list  :tempUuid="this.tempUuid"></tpm-act-special-detail-list>
      </a-tab-pane>
    </a-tabs>
  </j-modal>

</template>

<script>
import JTreeSelect from "@/components/cn-form/JTreeSelect";
  import { httpAction, postAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import TpmActSpecialDetailList from '@views/tpm/act/TpmActSpecialDetailList'
  import JMultiSelectTag from '../../../../components/dict/JMultiSelectTag'
  import ActTermModal from '@views/tpm/act/modules/ActTermModal'
  import { PageListMixin } from '@/mixins/PageListMixin'
import JImageUpload from '@comp/cn-form/JImageUpload'

  export default {
    name: "TpmActSpecialModal",
    components: { JImageUpload,ActTermModal,JTreeSelect, TpmActSpecialDetailList,JMultiSelectTag },
    mixins: [PageListMixin],
    data () {
      return {
        title:"操作",
        visible: false,
        model: {},
        tempUuid:'',
        showterm: false,
        showorg: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        tabs: {
          activeKey: 'global',
          global: {
            key: 'global',
            columns: [
            ],
            dataSource: [],
          },
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
          actName:{rules: [{ required: true, message: '请输入活动名称!' }]},
          actContent:{rules: [{ required: true, message: '请输入活动内容!' }]},
          actCollections:{rules: [{ required: true, message: '请选择采集项目!' }]},
          haveTerm:{rules: [{ required: true, message: '请选择是否有门店清单!' }]},
          actExecNeeds:{rules: [{ required: true, message: '请输入执行要求!' }]},
          actStart:{rules: [{ required: true, message: '请选择活动时间!' }]},
          actFileUrl:{rules: [{ required: true, message: '请上传示例文件!' }]},
        },
        url: {
          add: window._CONFIG['domianTpmURL']+"/act/tpmActSpecial/saveOrUpdate",
          edit: window._CONFIG['domianTpmURL']+"/act/tpmActSpecial/saveOrUpdate",
        },
      }
    },
    created () {
    },
    methods: {
      add () {
        this.edit({});
      },
      edit (record) {
        if (record.tempUuid == undefined || record.tempUuid == ''){
          if (record.id!=undefined &&record.id!=null){
            this.tempUuid = record.id;
          }else{
            this.tempUuid = this.generateUUID(false);
          }

        }else{
          this.tempUuid = record.tempUuid
        }
        this.form.resetFields();
        this.model = Object.assign({}, record);
        if (this.model.haveTerm!=undefined && this.model.haveTerm==1){
          this.showterm = true
          this.showorg = false
        }else{
          this.showterm = false
          this.showorg = true
        }
        if (this.model.actStart!=undefined){
          let arr = []
          arr.push(this.model.actStart)
          arr.push(this.model.actEnd)
          this.model.actStart = arr
        }
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'actOrgs','tempUuid','actCode','actName','actStart','actEnd','actContent','actExecNeeds','actCollections','haveTerm','actFileUrl'))
		  //时间格式化
        });

      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
              httpurl+=this.url.add;
              method = 'post';
            let formData = Object.assign(this.model, values);
            //时间格式化
            formData.tempUuid = this.tempUuid
            let tmpdate = formData.actStart
            formData.actStart= moment(tmpdate[0]).format('YYYY-MM-DD')
            formData.actEnd= moment(tmpdate[1]).format('YYYY-MM-DD')

            console.log(formData)
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }
        })
      },
      handleCancel () {
        this.close()
        this.showterm = false
      },
      changeTerm(val){
        if (val!=undefined){
          if (val==='' || val ==='0'){
            this.showterm = false
            this.showorg = true
          }else{
            this.showterm = true
            this.showorg = false
          }
        }
      },
    }
  }
</script>

<style lang="less" scoped>

</style>